import React from 'react';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input, message } from 'antd';
import axios from 'axios';
import { useNavigate } from 'react-router';
// 导入React、antd组件、axios、react-router-dom中的useNavigate函数
const LoginForm = () => {
    // 定义表单字段类型
    type FieldType = {
        username?: string;
        password?: string;
        remember?: string;
    };
    // 使用useNavigate函数获取导航对象
    const navigate = useNavigate()
    // 定义表单提交函数
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        // 构造请求数据
        const resdata = {
            username: values.username,
            password: values.password,
            message
        }
        // 发送登录请求
        axios.post('/api/login', resdata).then((res) => {
            // 判断登录结果
            if (res.data.code === 10000) {
                // 登录成功，保存token，并跳转到首页
                console.log(res.data.data);
                
                localStorage.setItem('accessToken', res.data.data.accessToken)
                 localStorage.setItem('refreshToken', res.data.data.refreshToken)
                message.success('登录成功')
                navigate('/')
            } else {
                // 登录失败，提示错误信息
                message.success('登录失败')
            }
        })

        console.log('Success:', values);
    };

    // 定义表单提交失败函数
    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <Form
            name='basic'
            labelCol={{ span: 5 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            size='large'
            autoComplete='off'

        >
            <Form.Item
                name='username'
                rules={[{ required: true, message: '请输入正确的用户名!' }]}
                className='login_user'

            >
                <Input placeholder='请输入用户名' />
            </Form.Item>
            <Form.Item
                name='password'
                rules={[{ required: true, message: '您输入的密码不正确!' }]}
                className='login_password'
            >
                <Input.Password
                    placeholder='请输入密码'
                />
            </Form.Item>
            <Form.Item className='login_remember'>
                <Button className='login_qx_btn '

                >
                    {('取消')}
                </Button>
                <Button className='login_qd_btn '
                    type='primary'
                    htmlType='submit'
                >
                    {('登录')}
                </Button>
            </Form.Item>
        </Form>
    );
};

export default LoginForm;
